<template>
  <div class="out-container">
    <div class="titleborder" :style="borderStyle">
      <img :src="contentUrl"/>
      <div
        class="titlespan"
        :style="titleStyle"
      >
        {{ borderOptions.bordertitle }}
        <span style="color: #4FC7FF">
          {{ borderOptions.borderunit }}
        </span>
      </div>
      <div class="titlecontent" :style="contentStyle">
        <slot />
      </div>
    </div>
  </div>
</template>

<script>
import defaultmixins from '@/mixins/bigScreen/defaultmixins'
export default {
  name: 'DashPaddingWhiteBorder',
  mixins: [defaultmixins],
  props: ['title'],
  data() {
    return {
      backUrl: require('@/assets/linglong/bg_yongdiantitle_hover.png'),
      contentUrl: require('@/assets/linglong/bg_nengliushengchantu.png')
    }
  },
  computed: {
    titleStyle() {
      return {
        ...this.borderOptions.titleSpan,
        backgroundImage: `url(${this.backUrl})`,
        top: 27 * this.$root.setting.scale + 'px',
        left: 26 * this.$root.setting.scale + 'px',
        height: 60 * this.$root.setting.scale + 'px',
        fontSize: 38 * this.$root.setting.scale + 'px',
        fontWeight: 400 * this.$root.setting.scale
      }
    },
    contentStyle() {
      return {
        ...this.borderOptions.titleContent
      }
    },
    borderStyle() {
      return {
        width: '756px',
        height: '370px'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .out-container {
    height: 100%;
    width: 100%;
    padding: 50px;
  }
  .titleborder {
    height: 100%;
    width: 100%;
    /*border: 1px dashed #fffdef;*/
    position: relative;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      z-index: 0;
      // border: 1px dashed #FFFFFF;
    }
  }

  .titlespan {
    // border: 1px dashed #fffdef;
    width: fit-content;
    background-size: 100% 100%;
    color: #FFFFFF;
    z-index: 10;
    position: absolute;

    color:rgba(255,255,255,1)
  }
  .titlecontent {
    height: calc(100% - 60px);
    padding-top: 60px;
  }
  .lbdiv {
  }
</style>
